<template>
  <div>
    <section>
      <h2>同源政策（Same Origin Policy）</h2>
      <p>简而言之，浏览器不允许JavaScript访问和当前页面不在同一个“源”（Origin）的资源。</p>
    </section>
    <section>
      <h2>什么是源？</h2>
      <p>源包含3部分：</p>
      <ul>
        <li>
          <flipper>
            <div slot="face">协议</div>
            <div slot="back">https</div>
          </flipper>
        </li>
        <li>
          <flipper>
            <div slot="face">域名/IP/主机名</div>
            <div slot="back">www.baidu.com</div>
          </flipper>
        </li>
        <li>
          <flipper>
            <div slot="face">端口</div>
            <div slot="back">8080</div>
          </flipper>
        </li>
      </ul>
      <h4>不同源的例子：</h4>
      <ul>
        <li>
          <code>http://baidu.com</code>和<code>https://baidu.com</code>协议不同
        </li>
        <li>
          <code>http://baidu.com</code>和<code>http://www.baidu.com</code>域名不同
        </li>
        <li>
          <code>http://localhost:8080</code>和<code>http://localhost:8081</code>端口号不同
        </li>
        <li>
          <code>http://127.0.0.1</code>和<code>http://localhost</code>一个用主机名，另一个用IP
        </li>
        <li>
          <code>http://baidu.com</code>和<code>http://baidu.com:80</code>一个有端口号，另一个没有
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import Flipper from '@/components/Flipper'

export default {
  components: {Flipper}
}
</script>
